<template>
  <div>
    <el-card class="card-row" shadow="hover" :body-style="{ padding: '10px' }">
      <el-row>
        <el-col :span="6">
          <img
            src="/static/image/course-cover-default-d27882d4.png"
            class="course-cover"
          />
        </el-col>
        <el-col class="info-div" :span="12">
          <div class="info-flex-warp">
            <el-row class="info-detail">{{ classInfo.course_name }}</el-row>
            <el-row class="info-detail info-little"
            >开课信息：{{ classInfo.course_name + ' ' + classInfo.year + classInfo.semester }}学期
            </el-row
            >
            <el-row class="info-detail info-little">授课教师:{{ userInfo.name }}</el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-flex-warp">
            <el-button style="margin: 5px;width: 100px;" type="success" @click="clickMethod(1)"> 发布通知</el-button>
           </div>
        </el-col>
        <el-col :span="3">
          <div class="info-flex-warp">

          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="22" :offset="1">
          <el-collapse @change="handleChange">
            <el-collapse-item :title="anTitle">
              <el-table
                stripe
                :data="announcementList"
                style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <el-form label-position="left">
                      <el-form-item label="详细信息">
                        {{scope.row.announcementContent}}
                      </el-form-item>
                    </el-form>
                  </template>

                </el-table-column>
                <el-table-column label="通知id" prop="announcementId" sortable></el-table-column>
                <el-table-column label="通知标题" prop="announcementTitle"></el-table-column>
                <el-table-column label="最后修改时间" prop="lastChangeTime" sortable>
                  <template slot-scope="scope">
                    {{ $global.formatTimeString(scope.row.lastChangeTime) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" @click="clickMethod(2,scope.row)">
                      修改
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-card>
    <div>
      <el-dialog
        :title="isChange?'编辑通知':'新建通知'"
        :visible.sync="dialogVisible"
        width="30%"
        center
        destroy-on-close
      >
        <div v-if="deliverMsg">
          <el-form label-position="left">
            <el-form-item label="通知标题">
              <el-input v-model="msgForm.announcementTitle" placeholder="请输入标题">
              </el-input>
            </el-form-item>
            <el-form-item label="通知内容">
              <el-input
                type="textarea"
                :row="6"
                v-model="msgForm.announcementContent"
                placeholder="请键入通知内容"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">取 消</el-button>
          <el-button type="primary" @click="confirmDeliver">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import state from '../../store/index'
import tc from '../../store/teacher'
import axios from 'axios'
import qs from 'qs'

export default {
  computed: {
    userInfo() {
      return state.getters.userInfo
    },
    anTitle() {
      return '查看已有课程通知：共' + (this.announcementList == null ? 0 : this.announcementList.length) + '条'
    }
  },

  props: ['classInfo',],
  async mounted() {
    await axios.post('/api/showAllAnnouncements', qs.stringify({courseId: this.classInfo.courseId}))
      .then(res => {
        this.announcementList = res.data.announcementList
      })
  },
  data() {
    return {
      msgForm: {
        announcementTitle: '',
        announcementContent: ''
      },
      dialogVisible: false,
      deliverMsg: true,
      isChange: false,
      changeId: -1,
      announcementList: []

    }
  },
  methods: {
    async handleChange() {
      console.log(this.announcementList)

    },
    clickMethod(num, row) {
      if (num === 1) {
        this.msgForm = {}
        this.deliverMsg = true
      } else {
        this.msgForm = {
          announcementTitle: row.announcementTitle,
          announcementContent: row.announcementContent
        }
        this.isChange = true
        this.changeId = row.announcementId
        this.deliverMsg = true
      }
      this.dialogVisible = true
      console.log(this.classInfo)
    },
    confirmDeliver() {
      if (!this.isChange) {// 新建
        axios.post('/api/createAnnouncement', qs.stringify({
          courseId: this.classInfo.courseId,
          announcementTitle: this.msgForm.announcementTitle,
          announcementContent: this.msgForm.announcementContent
        })).then(res => {
          axios.post('/api/showAllAnnouncements', qs.stringify({courseId: this.classInfo.courseId}))
            .then(res2 => {
              this.announcementList = res2.data.announcementList
              this.$message.success(res.data.message)
              this.msgForm = {}
              this.dialogVisible = false
            })
        })
      } else {// 编辑
        axios.post('/api/modifyAnnouncement', qs.stringify({
          courseId: this.classInfo.courseId,
          announcementId: this.changeId,
          announcementTitle: this.msgForm.announcementTitle,
          announcementContent: this.msgForm.announcementContent
        })).then(res => {
          axios.post('/api/showAllAnnouncements', qs.stringify({courseId: this.classInfo.courseId}))
            .then(res2 => {
              this.announcementList = res2.data.announcementList
              this.$message.success(res.data.message)
              this.msgForm = {}
              this.isChange = false
              this.changeId = -1
              this.dialogVisible = false
            })
        })
      }

    }
  }
};
</script>

<style>
.card-row {
  /* padding: 10px 0; */
  margin: 10px;
}

.course-cover {
  display: block;
  padding: 5px;
  width: 95%;
  float: initial;
}

.info-div {
  padding-left: 10px;
  padding-top: 10px;
  height: 100%;
}

.info-detail {
  /* font-size: 11px; */
  padding: 3px;
  height: 30px;
}

.info-little {
  font-size: 11px;
  color: #c0c0c0;
}

.info-flex-warp {
  flex-flow: column;
  display: flex;
  height: 100%;
  /* text-align: center; */
  justify-content: flex-start;
}
</style>
